<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table树形表格</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../dist/plugins/treegrid/dist/jquery.treegrid.min.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/plugins/treegrid/dist/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../dist/plugins/treegrid/dist/bootstrap-table-treegrid.min.js"></script>
</head>
<body>

<div id="toolbar">
    <button class="btn btn-secondary" title="全部展开" type="button" onclick="$('#data-table').treegrid('collapseAll');">
        <i class="fa fa-chevron-down"></i>
    </button>
    <button class="btn btn-secondary" title="全部折叠" type="button" onclick="$('#data-table').treegrid('expandAll');">
        <i class="fa fa-chevron-up"></i>
    </button>
</div>
<table id="data-table" class="text-nowrap">
</table>

<script type="text/javascript">
$(function () {
    var table = $("#data-table");
    table.bootstrapTable({
        toolbar: "#toolbar",
        toolbarAlign: "right",
        url: "../basic/tree.json",
        treeShowField: 'name',
        parentIdField: 'parentId',
        onResetView: function(data){
            table.treegrid({
                treeColumn: 1, //展开折叠图标出现列索引
                initialState: 'expanded'// 所有节点都折叠
                //initialState: 'expanded',// 所有节点都展开，默认展开
            });
        },
        onCheck:function(row){
            //选中行事件
        },
        onUncheck:function(row){
            //取消选中行事件
        },
        columns: [
            {checkbox: true},
            {field: "name" , title: "地区名称"},
            {field: "amount" , title: "人口数量" , align: "center"},
            {field: "description" , title: "地区说明"}
        ]
    });
});

</script>
</body>
</html>